<%@page import="org.shop.entity.security.MyUserDetail"%>
<%@page import="org.springframework.security.core.context.SecurityContextImpl"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
	
	SecurityContextImpl securityContextImpl = (SecurityContextImpl)request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<title>二手求购详情</title>
<script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>
<link href="<%=basePath%>/assets/layer/mobile/need/layer.css"
	rel="stylesheet" type="text/css">
<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
<style>
body{
	padding-bottom:0.8rem;
}
.shangjiaxinxi {
	padding-bottom: 0.2rem;
	background: #fff
}

.shangjiaxinxi img {
	width: 12%;
	margin: 0 2% 0 4%;
	border-radius: 10%
}

.shangjiaxinxi_cont {
	width: 80%
}

.shangjiaxinxi_cont h4 {
	font-size: 0.28rem;
	font-weight: bold;
	line-height: 0.5rem
}

.shangjiaxinxi_cont p {
	font-size: 0.22rem;
	line-height: 0.43rem;
}

.maijiamingcheng {
	text-indent: 0.3rem;
}

.maijiadianpujieshao {
	text-indent: 0.3rem
}

.shangjiaxinxi {
	padding-top: 0.3rem
}

.shangpinjieshao {
	font-size: 0.22rem;
	padding: 0.2rem;
	background: #fff
}

.shangpintupian {
	width: 80%;
	padding: 0.3rem 10%
}

.shangpintupian img {
	width: 100%
}

.shangpinjiage span {
	font-size: 0.22rem;
	line-height: 0.6rem;
	padding: 0 0.3rem;
	color: #ad8585
}

.navPOS {
	height: 0.8rem;
}

.navPOS span {
	width: 20%;
	height: 0.8rem;
	line-height: 0.8rem
}

.navPOS span img {
	width: 28%;
	margin: 0.2rem 0 0.2rem 0.2rem;
	float: left
}

.xiangyao {
	background: red;
	width: 30%;
	height: 0.6rem;
	margin: 0.1rem;
	text-align: center;
	line-height: 0.6rem;
	color: #fff;
	font-size: 0.24rem;
}

.pinglun ul li {
	width: 98%;
	padding: 0 1%;
	background: #fff;
	padding-bottom: 0.1rem;
	border-top: 0.01rem solid #f1f1f1
}

.pinglun ul li>.img, .pinglun ul li>.img2 {
	width: 15%;
	height: 1rem
}

.pinglun ul li>.img img, .pinglun ul li>.img2 img {
	width: 60%;
	margin: 20%;
	display: block;
	border-radius: 10%
}

.pinglun ul li>.pltext {
	width: 81%;
	padding: 0 2%
}

.pinglun ul li>.pltext .plrenxx {
	font-size: 0.24rem;
	line-height: 0.4rem;
	font-weight: bold;
	padding-top: 0.1rem
}

.pinglun ul li>.pltext .plxx {
	font-size: 0.26rem;
	line-height: 0.3rem;
	padding: 0.1rem 0;
}

.pinglun ul li>.pltext .plxxziliao>span {
	font-size: 0.22rem;
	color: #ad8585;
	line-height: 0.5rem;
}

.pinglun ul li>.pltext .plxxziliao>a {
	color: #007aff;
	font-size: 0.16rem;
	line-height: 0.3rem;
	padding: 0 0.1rem
}

.pinglun ul li .pltext ul .hfclearFirx {
	width: 98%;
	padding: 0 1%;
	background: #fff;
	padding-bottom: 0.1rem;
	border-top: 0.01rem solid #f1f1f1
}

.pinglun ul li>.pltext ul li .hfimg {
	width: 15%;
	height: 1rem
}

.pinglun ul li>.pltext ul li .hfpltext {
	width: 81%;
	padding: 0 2%
}

.pinglun ul li>.pltext ul li .hfimg img, .hfpinglun ul li>.hfpltext ul li .hfimg2 img
	{
	width: 60%;
	margin: 20% 0 0 0;
	display: block;
	border-radius: 10%
}

.pinglun ul li>.pltext ul li .hfplrenxx {
	font-size: 0.24rem;
	line-height: 0.4rem;
	padding-top: 0.1rem;
	color: #ad8585
}

.pinglun ul li>.pltext ul li .hfplxx {
	font-size: 0.24rem;
	line-height: 0.3rem;
	padding: 0.1rem 0;
}

.pinglun ul li>.pltext ul li .hfplxxziliao>span {
	font-size: 0.22rem;
	color: #ad8585;
	line-height: 0.5rem;
}

.huifukuang {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #fff;
	border-top: 1px solid #f1f1f1;
	padding: 0.05rem 0;
}

.huifukuang>img {
	width: 8%;
	display: block;
	float: left;
	height: 0.5rem;
	margin: 0.1rem 1%
}

.huifukuangcontent {
	width: 80%;
	z-index: 1;
	float: left;
	padding: 0.1rem 0
}

.huifukuangcontent textarea {
	width: 76%;
	height: 0.3rem;
	padding: 0.1rem 2%;
	border-radius: 0.2rem;
	line-height: 0.3rem;
	float: left;
	outline: none
}

.huifukuangcontent button {
	width: 15%;
	height: 0.4rem;
	border: none;
	margin: 0.05rem 2%;
	background: #FF3F25;
	float: left
}
</style>
</head>
<body id="body">
	<div class="header">
		<a class="returnInfo" href="#" onclick="javascript:window.location.href='<%=basePath%>app/getUsedGoodsList'"><i class="fa fa-angle-left"></i></a>
		二手求购详情
	</div>
	<div style="margin-top: 0.8rem;">
		<div class="shangjiaxinxi border-bottom-1 clearFirx">
			<c:if test="${not empty usedGoodsInfo.userPhoto}">
				<img
					src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${usedGoodsInfo.userPhoto}"
					class="float_l">
			</c:if>
			<c:if test="${empty usedGoodsInfo.userPhoto}">
				<img src="<%=basePath%>/assets/css/aboutUs/logo.png" class="float_l">
			</c:if>
			<div class="float_l shangjiaxinxi_cont">
				<p style="font-weight: bold; font-size: 0.26rem;">${usedGoodsInfo.userName}</p>
				<p style="font-size: 14px; color: #9e8686">
					<fmt:formatDate value='${usedGoodsInfo.createDate}'
						pattern='yyyy-MM-dd hh:mm:ss' />
				</p>

			</div>
		</div>
		<div class="shangpinxinxi border-bottom-8">
			<div class="shangpinjieshao">
				<p style="font-weight: bold; font-size: 16px; line-height: 0.42rem;">商品名称和商品的简单信息${usedGoodsInfo.goodsIntro}</p>
				<p style="font-size: 14px; color: #9e8686;line-height:0.42rem;">
					理想价格：
					<i class="fa fa-rmb" style="color: red;"></i>
					<i style="color: red; font-weight: bold;font-size: 0.3rem">${usedGoodsInfo.goodsPrice}</i>
				</p>
			</div>
			<div class="shangpintupian border-bottom-1">
				<c:forTokens items="${usedGoodsInfo.goodsImage}" delims=","
					var="imgPath">
					<div class="swiper-slide">
						<img
							src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${imgPath}"
							alt="">
					</div>
				</c:forTokens>
			</div>
			<div class="shangpinjiage clearFirx">
				<span class="float_r pageVeiw">浏览${usedGoodsInfo.pageView}</span>
			</div>
		</div>
		<div class="shangjiaxinxi clearFirx" style="margin-top: 0.1rem">
			<div class="float_l shangjiaxinxi_cont">
				<h4 class="maijiamingcheng">${usedGoodsInfo.userName}</h4>
				<p class="maijiadianpujieshao">卖出过0件商品</p>
			</div>
			<c:if test="${not empty usedGoodsInfo.userPhoto}">
				<img
					src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${usedGoodsInfo.userPhoto}"
					class="float_l">
			</c:if>
			<c:if test="${empty usedGoodsInfo.userPhoto}">
				<img src="<%=basePath%>/assets/css/aboutUs/logo.png" class="float_l">
			</c:if>
		</div>
		<div class="pinglun">
			<ul id="leaveMessageList">
				<c:forEach var="leaveMessageList" items="${leaveMessageList}">
					<li class="clearFirx">
						<div class="float_l img">
							<c:if test="${not empty leaveMessageList.userPhoto}">
								<img
									src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${leaveMessageList.userPhoto}"
									alt="" class="float_l">
							</c:if>
							<c:if test="${empty leaveMessageList.userPhoto}">
								<img src="<%=basePath%>/assets/css/aboutUs/logo.png"
									class="float_l">
							</c:if>
						</div>
						<div class="pltext float_l">
							<div id="${leaveMessageList.leaveMessageId}" onclick="huifu($(this),${leaveMessageList.leaveMessageId},${leaveMessageList.senderId},'${leaveMessageList.userName}',${leaveMessageList.leaveMessageId})">
				                <p class="plrenxx">${leaveMessageList.userName}</p>
				                <p class="plxx">${leaveMessageList.content}</p>
				                <p class="plxxziliao clearFirx">
				                	<span class="float_l">${leaveMessageList.timeStr}</span>
				                </p>
			            	</div>
	                
							<!-- 留言回复显示 -->
							<ul>
				                <c:forEach var="huiFuList" items="${leaveMessageList.replyLeaveMessage}">
				                	<c:if test="${not empty huiFuList.timeHuiFuStr}">
						                <li class="clearFirx">
								            <div class="float_l img">
							                  	<c:if test="${not empty huiFuList.senderUserPhoto}">
						       						<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${huiFuList.senderUserPhoto}" alt="" class="float_l">
										       	</c:if>
										       	<c:if test="${empty huiFuList.senderUserPhoto}">
										       		<img src="<%=basePath%>/assets/css/aboutUs/logo.png" class="float_l">
										       	</c:if>
								            </div>
								            <div class="pltext float_l" onclick="huifu($(this),${huiFuList.leaveMessageId},${huiFuList.senderId},'${huiFuList.senderName}',${huiFuList.identifying})">
								                <p class="plrenxx">${huiFuList.senderName}</p>
								                <p class="plxx">回复@${huiFuList.receiverName}:${huiFuList.content}</p>
								                <p class="plxxziliao clearFirx">
								                	<span class="float_l">${huiFuList.timeHuiFuStr}</span>
								                </p>
								            </div>
								        </li>
				                		
								    </c:if>
							    </c:forEach>
						    </ul>

						</div>
					</li>
				</c:forEach>
			</ul>
		</div>
		<div class="navPOS clearFirx" id="lastNav">
			<span class="float_r" id='liuyan'><img
				src="<%=basePath%>assets/images/xx.png" alt="">留言</span> <span
				class="float_l" id="shoucang"><img
				src="<%=basePath%>assets/images/sc.png" alt=""><i>收藏</i></span>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(function () {
		
		//是否已收藏
    	var favoritesInfo = "${favoritesInfo}";
       	if(favoritesInfo != ""){
       		$("#shoucang").find('img').attr('src','<%=basePath%>assets/images/sc2.png');
       		$("#shoucang").find('i').html('已收藏');
       	}else{
       	 	$("#shoucang").find('img').attr('src','<%=basePath%>assets/images/sc.png');
            $("#shoucang").find('i').html('收藏');
       	}
		
        //收藏||取消收藏
		$('#shoucang').click(function () {
			if("<%=securityContextImpl%>" == "null"){
	    		window.location.href = "<%=basePath%>app/appLogin2";
	    		return;
	    	}
			if($("#shoucang").find('i').html() == "收藏"){
				$(this).find('img').attr('src','<%=basePath%>assets/images/sc2.png');
		        $(this).find('i').html('已收藏');
			}else{
				$(this).find('img').attr('src','<%=basePath%>assets/images/sc.png');
		        $(this).find('i').html('收藏');
			}
			
			var targetId = '${usedGoodsInfo.goodsId}';
			var favoriteType = 1;
			
	    	$.ajax({
		    	url: "<%=basePath%>app/focusAndCancelFocus",
		        type: 'post',
		        data: {"targetId":targetId,"favoriteType":favoriteType},
		        dataType: 'json',
		        success: function (data) {
		        	if(data.state==1){
		        		layer.open({
		    			    content: '收藏成功'
		    			    ,skin: 'msg'
		    			    ,time: 2 //2秒后自动关闭
		    			  });
		        	}else if(data.state==2){
		        		layer.open({
		    			    content: '取消收藏'
		    			    ,skin: 'msg'
		    			    ,time: 2 //2秒后自动关闭
		    			  });
		        	}else{
		        		layer.open({
		    			    content: '收藏出了点小意外,稍等~'
		    			    ,skin: 'msg'
		    			    ,time: 2 //2秒后自动关闭
		    			  });
		        	}
    	        },error:function (){
    	        	layer.open({
	    			    content: '收藏出了点小意外,稍等~'
	    			    ,skin: 'msg'
	    			    ,time: 2 //2秒后自动关闭
	    			  });
    	        }
			});
		});
        
		$('.shangjiaxinxi>img').height($('.shangjiaxinxi>img').width());
    	$('.img').find('img').height($('.img').find('img').width());
        var liuyanBox = 1;
        
      	//给商品留言
        var liuyanHtml = '<div class="huifukuang">'+
        '<img src="<%=basePath%>assets/images/jianpan.png" alt="" onclick="jianpanHide()">'+
        '<img src="<%=basePath%>assets/images/timg.jpg" alt="" id="userPhotoImg">'+
        '<div class="huifukuangcontent" border="0" cellpadding="0" cellspacing="0">'+
        '<textarea id="liuyantext" placeholder="看上了就留言,多沟通沟通~"  onblur="hideAndShow(this)"></textarea>'+
        '<button id="liuyantijiao"  onclick="liuyantijiao()">发送</button>'+
        '</div>'+
        '</div>';
        $('#liuyan').click(function(){
        	if("<%=securityContextImpl%>" == "null"){
        		window.location.href = "<%=basePath%>app/appLogin2";
        		return;
        	}
            if(liuyanBox == 1){
            	
                $('body').append(liuyanHtml);
                //聚焦（拉起键盘）
                if('${usersInfo.userPhoto}'!=null&&'${usersInfo.userPhoto}'!='[]'&&'${usersInfo.userPhoto}'!=''){
                	$("#userPhotoImg").attr("src","<%=basePath%>app/getGoodsPhotoByName?goodsImage=${usersInfo.userPhoto}")
                }
                $("#liuyantext").focus();
                $("#lastNav").hide();
            }else {
            }
        });
		
	});
	
	//input留言框的失去焦点
	function hideAndShow(obj){
		var liuyantextValue = $("#liuyantext").val();
		if(liuyantextValue.length>0){

		}else{
		  $(".huifukuang").remove();
    	  $("#lastNav").show();
		}
    };
	
	//给商品留言
	function liuyantijiao(){
		var content = $("#liuyantext").val();
   		var friendId  = '${usedGoodsInfo.userId}';
    	var issueId = '${usedGoodsInfo.userId}';
    	var leaveMessageUserId = '${usersInfo.userId}';
    	var userName = '${usersInfo.userName}';
    	var userPhoto = '${usersInfo.userPhoto}';
    	var goodsId = '${usedGoodsInfo.goodsId}';
    	$.ajax({
	    	url: "<%=basePath%>app/addLeaveMessage",
	        type: 'post',
	        data: {"content":content,"friendId":friendId,"issueId":issueId,"leaveMessageUserId":leaveMessageUserId,"goodsId":goodsId},
	        dataType: 'json',
	        success: function (data) {
	        	if(data.state==1){
	        		$("#lastNav").show();
	        		layer.open({
	    			    content: '留言成功~'
	    			    ,skin: 'msg'
	    			    ,time: 2 //2秒后自动关闭
	    			  });
	        		var liuyanLeaveMessageUserId = data.leaveMessageId;
	        	      var htmlLi = '<li class="clearFirx">'+
	                  '<div class="float_l img"><img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage='+userPhoto+'" alt="" class="float_l"></div>'+
	                  '<div class="pltext float_l">'+
		                  '<p class="plrenxx">'+userName+'</p>'+
		                  '<p class="plxx">'+$('#liuyantext').val()+'</p>'+
		                  '<p class="plxxziliao clearFirx">'+
		                  	'<span class="float_l">刚刚</span>'+
// 		                  	'<a href="javascript:;" class="float_r huifuanniu" onclick="huifu($(this),'+liuyanLeaveMessageUserId+')">回复</a>'+
		                  '</p>'+
	                  '</div>'+
	                  '</li>';
	          if($('#liuyantext').val() != ''){
	              $('.pinglun>ul').prepend(htmlLi);
	              $('.img').find('img').height($('.img').find('img').width());
	              $('.huifukuang').remove();
	          }else {
	              layer.open({
	    			    content: '没有发表任何评论呢~'
	    			    ,skin: 'msg'
	    			    ,time: 2 //2秒后自动关闭
	    			  });
	              $('.huifukuang').remove();
	          }
	        	}else{
	        		layer.open({
	    			    content: '留言失败~'
	    			    ,skin: 'msg'
	    			    ,time: 2 //2秒后自动关闭
	    			  });
	        	}
	        },error:function (){
	        	layer.open({
    			    content: '网络出现了异常，请稍等~'
    			    ,skin: 'msg'
    			    ,time: 2 //2秒后自动关闭
    			  });
	        }
		});
	 };
	 
	//回复
   	function huifu(thisVal,leaveMessageId,senderId,userName,identifying) {
		if("<%=securityContextImpl%>" == "null"){
			window.location.href = "<%=basePath%>app/appLogin2";
			return;
		}
		
		var leaveMessageUserId = '${usersInfo.userId}'
		if(senderId!=leaveMessageUserId){
    		var liuyanHtmlLi = '<div class="huifukuang">'+
	    		'<img src="<%=basePath%>assets/images/jianpan.png" alt="">'+
				'<img src="<%=basePath%>assets/images/timg.jpg" alt="" id="userPhotoImgHuiFu">'+
	 			'<div class="huifukuangcontent" border="0" cellpadding="0" cellspacing="0">'+
		 			'<textarea id="liuyantext" placeholder="回复@$'+userName+':" onblur="hideAndShow()"></textarea>'+
		 			'<button id="liuyantijiaoli"  onclick="liuyantijiaoli($(this),'+leaveMessageId+','+senderId+','+identifying+',\''+userName+'\')">发送</button>'+
	 			'</div>'+
			'</div>';
			thisVal.parent().parent().parent().prepend(liuyanHtmlLi);
			if('${usersInfo.userPhoto}'!=null&&'${usersInfo.userPhoto}'!='[]'&&'${usersInfo.userPhoto}'!=''){
				$("#userPhotoImgHuiFu").attr("src","<%=basePath%>app/getGoodsPhotoByName?goodsImage=${usersInfo.userPhoto}")
    		}
    		$("#liuyantext").focus();
    		$("#lastNav").hide();
		}else{
			//询问框
		  	layer.open({
		    	content: '确认删除该评论吗？',
		    	btn: ['确定', '取消'],
		    	yes: function(index){
		    		thisVal.parent().remove();
		    		layer.close(index);
		    		$.ajax({
			 	    	url: "<%=basePath%>app/delLeaveMessage",
		   		 	        timeout: 300000,
		   		 	        dataType: "json",
		   		 	        type: "post",
		   		 	        data: {
		   		 	        	"leaveMessageId":leaveMessageId
		   		 	        },success : function(data) {
		        	        	layer.open({
		        				    content: '删除留言成功！',
		        				    skin: 'msg',
		        				    time: 2 //2秒后自动关闭
		        				  });
		   		 	        },error : function() {
	   		 	        		layer.open({
	   		 	    		    content: '网络异常,请稍后再试~'
	   		 	    		    ,skin: 'msg'
	   		 	    		    ,time: 2 //2秒后自动关闭
	   		 	    		  });
	   		 	        }
	   		 	    })
	  		    		
  		    	}
  		  	});
		}
	}
	//回复提交
   	function liuyantijiaoli(thisVal,leaveMessageId,senderId,identifying,content) {
    	var liuVal = $('#liuyantext').val();
       	//插入后台数据
		var issueId = '${usedGoodsInfo.userId}';
   		var leaveMessageUserId = '${usersInfo.userId}';
   		var userName = '${usersInfo.userName}';
   		var userPhoto = '${usersInfo.userPhoto}';
   		var lmId = "";
   		if(identifying == "" || identifying == null){
   			lmId = leaveMessageId;
   		}else{
   			lmId = identifying;
   		}
  		$.ajax({
	   		url: "<%=basePath%>app/replyLeaveMessage",
		   	type: 'post',
		   	data: {"content":liuVal,"leaveMessageId":lmId,"issueId":issueId,"leaveMessageUserId":leaveMessageUserId,"senderId":senderId},
		   	dataType: 'json',
		   	success: function (data) {
			   	if(data.state==1){
			   		layer.open({
					    content: '留言成功~'
					    ,skin: 'msg'
					    ,time: 2 //2秒后自动关闭
					});
	   			
					var huifuLeaveMessageUserId = data.leaveMessageId;
			   		var huifuSenderId = data.senderId;
			   		var contentStr = '回复@'+content+':'+liuVal;
			   	    var htmlLi = '<li class="clearFirx">'+
			         	'<div class="float_l img">'+
			   	    		'<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage='+userPhoto+'" alt="" class="float_l">'+
			 	        '</div>'+
				        '<div class="pltext float_l">'+
			           		'<p class="plrenxx">'+userName+'</p>'+
				            '<p class="plxx">'+contentStr+'</p>'+
				            '<p class="plxxziliao clearFirx">'+
			           			'<span class="float_l">刚刚</span>'+
				            '</p>'+
			        	'</div>'+
			        '</li>';
		   	    	if(liuVal != ''){
			  	    	$("#"+lmId).siblings('ul').prepend(htmlLi);
			   	        $('.huifukuang').remove();
			        }else {
			            $('.huifukuang').remove();
			        }
	        	}else{
	        		layer.open({
	    			    content: '留言失败~',
	    			    skin: 'msg',
	    			    time: 2 //2秒后自动关闭
	   				});
	       			$('.huifukuang').remove();
	       		}
        	},error:function (){
	        	layer.open({
    			    content: '网络出现了异常，请稍等~'
    			    ,skin: 'msg'
    			    ,time: 2 //2秒后自动关闭
    			  });
	        	$('.huifukuang').remove();
	        }
		});
	}
	
</script>
</html>